<template>
	<p>Count:{{count}}</p>
	<button @click="inc">inc</button>
	<button @click="dec">dec</button>
	<button @click="reset">reset</button>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
   interface UseCounterOptions {	min?: number	max?: number    }
	
	function useCounter(initialValue = 0, options: UseCounterOptions = {}) {    	const count = ref(initialValue)    	const { max, min } = options    	const inc = () => (count.value = Math.min(max, count.value + 1),console.log(count.value))	    const dec = () => (count.value = Math.max(min, count.value - 1),console.log(count.value))	    const reset = () => (count.value = initialValue,console.log(count.value))
		console.log("useCounter  ： "+count.value)	    return { count, inc, dec, reset }
	}
	
	const { count, inc, dec, reset} = useCounter(0,{min:0,max:20});
	
</script>

<style>
</style>